import React from 'react';
import { Text, View, ScrollView,Button,Picker} from 'react-native';
import { createBottomTabNavigator } from 'react-navigation';
import Ionicons from 'react-native-vector-icons/Ionicons';
import ListItem from './common/ListItem'
import {$fetch} from "./api/http.js";
class HomeScreen extends React.Component {
  constructor(props) {
    super(props);

    this.registerInfo = null;

    this.state = {
        // name: '12312312',
        verifyCode: '',
        isSentVerify: true,
        timerTitle: '获取验证码'
    }
  }
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Home!</Text>
        {/* <MaterialCommunityIcons
            name={'message-text-outline'}
            size={30}
        />     
        <Icon.Button name="facebook" backgroundColor="#3b5998" >
          Login with Facebook
        </Icon.Button> */}
        <ScrollView>
          <ListItem name="登陆手机号码" font="FontAwesome" icon="mobile" subName="135****0418"/>
          <ListItem name="修改手势密码" font="Ionicons" icon="ios-lock" />
          <ListItem name="值班电话" font="FontAwesome" icon="mobile" subName="135****0418"/>
          <ListItem name="意见与反馈" font="FontAwesome" icon="mobile" subName="90.8M"/>
          <ListItem name="清除缓存" font="FontAwesome" icon="mobile" subName="135****0418"/>
        </ScrollView>
        <Button
          title="Go to Details"
          onPress={()=>this.requestTest()}
        />
        <Picker
          selectedValue={this.state.language}
          style={{ height: 50, width: 100 }}
          onValueChange={(itemValue, itemIndex) => this.setState({language: itemValue})}>
          <Picker.Item label="Java" value="java" />
          <Picker.Item label="JavaScript" value="js" />
        </Picker>
      </View>
    );
  }
  // 测试请求
  requestTest = () =>{
    console.log("发送请求")  
    // let data = {
    //   name: this.state.name
    // }   
    fetch("http://172.18.63.242/Test/servlet/MyServlet",{
      method: "POST",
      body: JSON.stringify({name:'1'})
    }).then(res=>{
      return res.text()
    }).then(res=>{
      console.log(res)
    }).catch(err=>{
      console.log(err)
    })
    // $fetch('servlet/MyServlet', 'POST',JSON.stringify(data))
    //   .then(res => {
    //       console.log(res);
    //   }).then(err => {
    //     console.log(err);
          

    //   });
  }

}

class SettingsScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Settings!</Text>
      </View>
    );
  }
}

class MessageScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>Message!</Text>
      </View>
    );
  }
}

class UserScreen extends React.Component {
  render() {
    return (
      <View style={{ flex: 1, justifyContent: 'center', alignItems: 'center' }}>
        <Text>User!</Text>
      </View>
    );
  }
}

export default createBottomTabNavigator(
  {
    '消息': { screen: HomeScreen },
    '工作台': { screen: SettingsScreen },
    '统计': { screen: MessageScreen },
    '用户': { screen: UserScreen }
  },
  {
    navigationOptions: ({ navigation }) => ({
      tabBarIcon: ({ focused, horizontal, tintColor }) => {
        const { routeName } = navigation.state;
        let iconName;
        if (routeName === '消息') {
          iconName = `ios-information-circle`;
        } else if (routeName === '工作台') {
          iconName = `ios-options`;
        } else if (routeName === '统计') {
          iconName = `ios-options`;
        } else if (routeName === '用户') {
          iconName = `md-person`;
        }

        // You can return any component that you like here! We usually use an
        // icon component from react-native-vector-icons
        return <Ionicons name={iconName} size={horizontal ? 20 : 25} color={tintColor} />;
      },
    }),
    tabBarOptions: {
      activeTintColor: 'tomato',
      inactiveTintColor: 'gray',
    },
  }
);

